<template>
<div class="screen">
  <mt-header title="个人中心" class="title" style="height:6%">
  </mt-header>
  <div style="height: 80%;overflow: scroll">
  <div style="height: 20%;background-color: #fdfdff">
      <div class="circle" style="display: inline-block">
        <img src="../../../assets/image/fine.jpg" class="commentAvatarImage" @click="openChoiceFrame">
        <div style="display:none">
          <input type="file" name="headPortrait" id="headPortrait">
        </div>
      </div>
    <div class="inlineBlock"><span>fangzhang</span><br><span class="glyphicon glyphicon-user">未验证</span></div>
  </div>
  <div class="littleInterval"></div>
  <div>
    <div class="myApply" >我的申请</div>
    <hr/>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-file"></span>已报名</div>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-folder-open"></span>已录用</div>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-calendar"></span>已到岗</div>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-jpy"></span>已结算</div>
  </div>
  <div>
    <div class="myResume"><span id="myResumeTip">我的简历</span><span><a>下载简历</a></span></div>
    <hr class="hr1"/>
    <div class="myApplyChildren" @click="openUploadFrame">
      <span class="glyphicon glyphicon-upload"></span>上传简历
    </div>
    <input type="file" id="uploadResume" style="display: none"/>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-credit-card"></span>职位卡</div>
    <div class="myApplyChildren" @click="editPerfectInformation"><span class="glyphicon glyphicon-tasks"></span>完善信息</div>
    <div class="myApplyChildren"><span class="glyphicon glyphicon-list-alt"></span>求职设置</div>
  </div>
  <div class="littleInterval"></div>
  <div class="listActiveCss"><span class="glyphicon glyphicon-gift"></span>我的任务</div>
  <hr class="hr2"/>
  <div class="listActiveCss"><span class="glyphicon glyphicon-gift"></span>学堂</div>
  <hr class="hr2"/>
  <div class="listActiveCss"><span class="glyphicon glyphicon-star"></span>公司收藏</div>
  <hr class="hr2"/>
  <div class="listActiveCss"><span class="glyphicon glyphicon-star-empty"></span>兼职收藏</div>
  <hr class="hr2"/>
  <div class="listActiveCss"><span class="glyphicon glyphicon-eye-open"></span>意见反馈</div>
  <hr class="hr2"/>
  <div class="listActiveCss" @click="linkToMore"><span class="glyphicon glyphicon-option-horizontal"></span>更多</div>
  <hr class="hr2"/>
  </div>
</div>
</template>

<script>
    export default {
        name: "Me",
      methods:{
        openChoiceFrame(){ //打开选择框架
          $("#headPortrait").trigger("click");
        },
        openUploadFrame(){
          $("#uploadResume").trigger("click");
        },
        linkToMore(){
          this.$router.push({path:'/more'});
        },
        editPerfectInformation(){
          console.log(123);
          this.$router.push({name:"PerfectInformation"});
        }
      }
    }
</script>

<style scoped>
  .listActiveCss{
    text-align: left;
    padding-left: 1rem;
    height: 4rem;
    line-height: 4rem;
  }
  .listActiveCss:active{
    background-color: lightgrey;
  }
  #myResumeTip{
    font-size: larger;
    font-weight: bolder;
    margin-right: 1rem;
  }
  .myResume{
    text-align: left;
    margin-left: 1rem;
    margin-top: 2rem;
  }
  .myApplyChildren:active{
    background-color: lightgrey;
  }
  .myApplyChildren{
    width: 24%;
    display: inline-block;
  }
  .myApply{
    text-align: left;
    margin-left: 1rem;
    font-size: larger;
    font-weight: bolder;
  }
  .inlineBlock{
    display: inline-block;
  }
  .hr1{
    margin-top: 0px;
    margin-bottom: 20px;
  }
  .hr2{
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .circle{
    width: 60px;
    height: 60px;
    padding:2px;
    background: #ececec;
    border-radius:100px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    margin:1rem 1rem;

  }
  .commentAvatarImage{
    width:60px;
    height:60px;
    line-height: 0;
    /* remove line-height */
    display: inline-block;
    /* circle wraps image */
    border-radius: 50%;	/* relative value */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: linear 0.25s;
  }
</style>
